<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps<{
  date: string
}>()

const recordName = ref('')
const recordType = ref('支出')
const recordCategory = ref('餐饮')
const recordAmount = ref(0)
const recordRemark = ref('')

const nameInput = ref<HTMLInputElement | null>(null)

const types = ['支出', '收入']
const categories = {
  支出: ['餐饮', '交通', '购物', '居住', '娱乐', '医疗', '教育', '其他'],
  收入: ['工资', '奖金', '投资', '兼职', '其他']
} as const

const emit = defineEmits(['add-success'])

const addRecord = () => {
  if (!recordName.value || !recordType.value || !recordCategory.value || !recordAmount.value) {
    alert('请填写所有字段')
    return
  }
  
  const record = {
    name: recordName.value,
    type: recordType.value,
    category: recordCategory.value,
    date: props.date,
    amount: recordAmount.value,
    remark: recordRemark.value
  }
  
  // 清空表单
  recordName.value = ''
  recordCategory.value = '餐饮'
  recordAmount.value = 0
  recordType.value = '支出'
  recordRemark.value = ''
  
  emit('add-success', record)

  // 重新聚焦到名称输入框
  nameInput.value?.focus()
}

// 监听回车事件
const handleKeyPress = (e: KeyboardEvent) => {
  if (e.key === 'Enter') {
    addRecord()
  }
}

// 组件挂载后自动聚焦到名称输入框
onMounted(() => {
  nameInput.value?.focus()
})

const formData = ref({
  name: '',
  type: '',
  category: '',
  amount: 0,
  remark: ''
})

// 重置表单内容的方法
const resetForm = () => {
  formData.value = {
    name: '',
    type: '',
    category: '',
    amount: 0,
    remark: ''
  }
}
</script>

<template>
  <div class="add-record-form" @keypress="handleKeyPress">
    <div class="form-row">
      <div class="form-group">
        <label for="type">类型</label>
        <select id="type" v-model="recordType">
          <option v-for="type in types" :key="type" :value="type">{{ type }}</option>
        </select>
      </div>
      <div class="form-group">
        <label for="category">种类</label>
        <select id="category" v-model="recordCategory">
          <option value="" disabled>请选择种类</option>
          <option v-for="category in categories[recordType]" :key="category" :value="category">
            {{ category }}
          </option>
        </select>
      </div>
      <div class="form-group">
        <label for="name">名称</label>
        <input 
          id="name" 
          ref="nameInput"
          v-model="recordName" 
          type="text" 
          placeholder="请输入名称" 
        />
      </div>
      <div class="form-group">
        <label for="amount">金额</label>
        <input id="amount" v-model="recordAmount" type="number" placeholder="请输入金额" />
      </div>
      <div class="form-group button-group">
        <button class="add-button" @click="addRecord">添加</button>
      </div>
    </div>
    <div class="form-row remark-row">
      <div class="form-group">
        <label for="remark">备注</label>
        <input id="remark" v-model="recordRemark" type="text" placeholder="请输入备注（选填）" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.add-record-form {
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
}

.form-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.form-group {
  flex: 1;
  min-width: 120px;
}

.button-group {
  flex: 0 0 auto;
  min-width: 80px;
}

label {
  display: block;
  margin-bottom: 4px;
  color: #666;
}

input,
select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.add-button {
  width: 100%;
  padding: 8px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  height: 36px;
}

.add-button:hover {
  background-color: #40a9ff;
}

.remark-row {
  margin-top: 16px;
}

.remark-row .form-group {
  flex: 1;
}
</style> 